<template>
  <Form :label-width="90">
    <FormItem label="显示">
      <i-switch size="small" v-model="title.show"></i-switch>
    </FormItem>
    <FormItem label="主副标题间距">
      <InputNumber size="small" :max="1000" :min="0" v-model="title.itemGap" :active-change="false"></InputNumber>
    </FormItem>
    <Collapse value="0" accordion>
      <Panel>
        主文本
        <div slot="content">
          <FormItem label="文本内容">
            <Input size="small" v-model="title.text"/>
          </FormItem>
          <FormItem label="超链接">
            <Input size="small" v-model="title.line"/>
          </FormItem>
          <FormItem label="打开方式">
            <Select :transfer="true" size="small" v-model="title.target">
              <Option value="self">当前窗口打开</Option>
              <Option value="blank">新窗口打开</Option>
            </Select>
          </FormItem>
          <FormItemPanel title="文本样式">
            <FormItem label="字号">
              <InputNumber size="small" :max="1000" :min="0" v-model="title.textStyle.fontSize" :active-change="false"></InputNumber>
            </FormItem>
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="title.textStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="title.textStyle.textShadowColor" alpha recommend/>
            </FormItem>
            <FormItem label="阴影大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="title.textStyle.textShadowBlur" :active-change="false"></InputNumber>
            </FormItem>
          </FormItemPanel>
        </div>
      </Panel>
      <Panel>
        副文本
        <div slot="content">
          <FormItem label="文本内容">
            <Input size="small" v-model="title.subtext"/>
          </FormItem>
          <FormItem label="超链接">
            <Input size="small" v-model="title.sublink"/>
          </FormItem>
          <FormItem label="打开方式">
            <Select :transfer="true" size="small" v-model="title.subtarget">
              <Option value="self">当前窗口打开</Option>
              <Option value="blank">新窗口打开</Option>
            </Select>
          </FormItem>
          <FormItemPanel title="文本样式">
            <FormItem label="字号">
              <InputNumber size="small" :max="1000" :min="0" v-model="title.subtextStyle.fontSize" :active-change="false"></InputNumber>
            </FormItem>
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="title.subtextStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="title.subtextStyle.textShadowColor" alpha recommend/>
            </FormItem>
            <FormItem label="阴影大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="title.subtextStyle.textShadowBlur" :active-change="false"></InputNumber>
            </FormItem>
          </FormItemPanel>
        </div>
      </Panel>
      <Panel>
        位置
        <div slot="content">
          <Alert show-icon style="padding-right: 10px; text-align: justify;">
            距离值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比，也可以是'left', 'center', 'right'
          </Alert>
          <FormItem label="距左侧距离">
            <Input size="small" v-model="title.left"/>
          </FormItem>
          <FormItem label="距上侧距离">
            <Input size="small" v-model="title.top"/>
          </FormItem>
          <FormItem label="距右侧距离">
            <Input size="small" v-model="title.right"/>
          </FormItem>
          <FormItem label="距下侧距离">
            <Input size="small" v-model="title.bottom"/>
          </FormItem>
        </div>
      </Panel>
    </Collapse>
  </Form>
</template>

<script>
export default {
  name: "EchartsTitleConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      title: this.value
    }
  },
  mounted() {

  },
  methods: {},
  computed: {},
  watch: {
    value (val) {
      this.grid = val;
    }
  }
}
</script>

<style scoped>

</style>
